<template>
  <div>
    <!-- 新增表单 行内表单 -->
    <!-- 
      inline="true" 可以让表单域变为行内的表单域。即让该表单不换行，直到挤满该页面，才会换行 
      @submit.native.prevent  : native 表示对一个组件绑定系统原生事件, prevent: 表示提交以后不刷新页面
    -->
    <el-form
      ref="addform"
      :inline="true"
      :model="form"
      @submit.native.prevent
      class="demo-form-inline"
      label-width="80px"
    >
      <el-input
          v-model="form.name"
          placeholder="请输入产品名称"
          @keyup.native.enter="onSubmit"
          class="input-with-select"
        >
        <el-button slot="append" icon="el-icon-search" @click="onSubmit"></el-button>
      </el-input>
      <el-button @click="Add" type="info" plain>
        添加产品
        <i class="el-icon-upload el-icon--right"></i>
      </el-button>
      <el-drawer
            title="添加眼妆信息"
            ref="addform"
            :rules="rules"
            :model="addform"
            :visible.sync="AddDrawer"
            :AddDirection="AddDirection"
            :before-close="HandleClose"
            style="color: #666; font-size: 25px"
          >
          <el-divider></el-divider>
        <el-form-item label="产品名称">
          <el-input v-model="addform.name" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="阴影色号">
            <el-input v-model="addform.title" placeholder="请输入产品阴影色号" />
        </el-form-item>
        <el-form-item label="英文名称">
            <el-input v-model="addform.detail" placeholder="请输入产品英文名称" />
        </el-form-item>
        <el-form-item label="产品价格">
            <el-input v-model="addform.price" placeholder="请输入产品价格" />
        </el-form-item>
        <el-form-item label="图一">
            <el-input v-model="addform.pic1" placeholder="请输入图片路径" />
        </el-form-item>
        <el-form-item label="图二">
            <el-input v-model="addform.pic2" placeholder="请输入图片路径" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddSubmit()"
          style=" margin-left: 180px;"
            >立即新增
          </el-button>
        </el-form-item>
      </el-drawer>
    </el-form>
    <el-divider content-position="left"> 产品列表 </el-divider>

    <!-- 表格 -->
    <!-- label: 列名  prop: 列值 -->
    <el-table :data="eyes" class="cell">
      <el-table-column label="封面图" width="200px" align="center">
        <!--  
          slot-scope="scope" 来取得作用域插槽:data绑定的数据,
          scope可以随便替换其他名称,只是定义对象来代表取得的data数据,便于使用 
          相当于定义插槽, 可以访问.row.pic拿到每一行对象的属性, 固定写法
        -->
        <template slot-scope="scope">
          <img :src="scope.row.pic1" width="120px" alt="">
          <img :src="scope.row.pic2" width="50px" alt="">
        </template>
      </el-table-column>
      <el-table-column label="产品名称" prop="name" align="center">
      </el-table-column>
      <el-table-column label="产品阴影色号" prop="title" align="center">
      </el-table-column>
      <el-table-column label="产品英文名称" prop="detail" align="center">
      </el-table-column>
      <el-table-column label="产品价格(￥)" prop="price" align="center">
      </el-table-column>
      <el-table-column label="操作" width="170px" align="center">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button size="small" @click="openright(scope.row.pid)" type="warning" icon="el-icon-edit" style="margin-right: 10px" circle>
          </el-button>
          <el-drawer
            title="修改眼妆信息"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose"
            style="color: #666; font-size: 25px"
          >
            <el-divider></el-divider>
            <el-form
              ref="form2"
              label-width="80px"
              style="width: 300px"
            >
              <el-form-item label="产品名称">
                <el-input v-model="form2.name" placeholder="请输入产品名称" />
              </el-form-item>
              <el-form-item label="阴影色号">
                <el-input v-model="form2.title" placeholder="请输入产品阴影色号" />
              </el-form-item>
              <el-form-item label="英文名称">
                <el-input v-model="form2.detail" placeholder="请输入产品英文名称" />
              </el-form-item>
              <el-form-item label="产品价格">
                <el-input v-model="form2.price" placeholder="请输入产品价格" />
              </el-form-item>
              <el-form-item label="图一">
                <el-input v-model="form2.pic1" placeholder="请输入图片路径" />
              </el-form-item>
              <el-form-item label="图二">
                <el-input v-model="form2.pic2" placeholder="请输入图片路径" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit(form2.pid)"
                  >立即修改</el-button>
              </el-form-item>
            </el-form>
          </el-drawer>


          <!-- 删除按钮 -->
          <el-button @click="delItem(scope.row.pid)" size="small" type="danger" icon="el-icon-delete" circle>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
     // 添加
     AddDrawer: false,
      AddDirection: "rtl",
      // 修改
      drawer: false,
      direction: "rtl",
      dialogFormVisible: false,
      eyes: [], // 绑定当前页面显示的产品列表数据
      form2:[],
      form: {
        name:"",
        leixing:"yan",
      },
      addform:{
        pid:'null',
        name:"",
        title:"",
        price:"",
        detail:"",
        pic1:"",
        pic2:"",
        leixing:"yan",

      }
      ,
      rules: {
        name: [{ required: true, message: "产品名称必须填写", trigger: "blur" }], //
        title: [{ required: true, message: "阴影色号必须填写", trigger: "blur" }], //
        price: [{ required: true, message: "价格必须填写", trigger: "blur" }], //
        detail: [{ required: true, message: "英文名称必须填写", trigger: "blur" }], //
        pic1: [{ required: true, message: "图片必须填写", trigger: "blur" }], //
        pic2: [{ required: true, message: "图片必须填写", trigger: "blur" }], //
      },
    };
  },
  methods: {
     // 添加
     Add(pid) {
      this.AddDrawer = true;
    },
    HandleClose(done) {
      this.AddDrawer = false;
    },
    AddSubmit(pid) {
      this.$refs["addform"].validate((valid) => {
        if (valid) {
          this.$http.productApi.add(this.addform).then((res) => {
            this.AddDrawer = false;
            let params_= {leixing:'yan'}
          this.$http.productApi.queryByleixing(params_).then((res) => {
           // 将res.data.data存入this.products;
          this.eyes = res.data.data;
          });
            });
          }
          });
  },
    // 添加
    openright(pid) {
      this.drawer = true;
      this.$http.productApi.queryById({ pid }).then((res) => {
        this.form2 = res.data.data[0];
      });
    },
    handleClose(done) {
      this.drawer = false;
    },
    submit(pid) {
      this.$http.productApi.update(this.form2).then((res) => {
        this.drawer = false;
        let params = {leixing:'yan'}
    this.$http.productApi.queryByleixing(params).then((res) => {
      // 将res.data.data存入this.products;
      this.eyes = res.data.data;
    });
      });
    },
    onSubmit() { // 当点击查询按钮后执行
      if (this.form.name !== "") {
        // 当点击查询之后 执行的代码
        let params = {
          name: this.form.name,
          leixing:this.form.leixing,
         };
        this.$http.productApi.queryAllByNameAndleixing(params).then((res) => {
          if (res.data.data == "") {
            return this.$message({
              message: "非常可惜 , 没有找到哦~",
              type: "warning",
            });
          }
          // 替换
          this.eyes = res.data.data;
        });
      }
    },
    // 删除产品列表项 发送请求 删除成功后更新列表
    delItem(pid) {
      // 弹出确认删除对话框
      this.$confirm('该操作永久删除产品,是否继续?', '提示', {
        type: 'warning',
      }).then(() => {
        // 确认删除
        // 发送请求, 执行删除操作
        this.$http.productApi.delete({pid}).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除产品完成',
            });
            let params = {leixing:'yan'}
    this.$http.productApi.queryByleixing(params).then((res) => {
      // 将res.data.data存入this.products;
      this.eyes = res.data.data;
    });
          }
        })
      })
    }
  },
  /**组件挂载完毕后自动调用 生命周期方法 */
  mounted() {
    let params = {leixing:'yan'}
    this.$http.productApi.queryByleixing(params).then((res) => {
      // 将res.data.data存入this.products;
      this.eyes = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.input-with-select{
  width: 350px;
  margin-right: 15px;
}
</style>
